<script>
import {
  cancelOrderApi
} from '@/api/halykOrder'
export default {
  data() {
    return {
      dialogVisible: false,
      reasonList: [
        { label: this.$t('shouDaoKeHuJuJue'), value: 'BUYER_CANCELLATION_BY_MERCHANT' },
        { label: this.$t('wuFaLianXiDaoMaiJia'), value: 'BUYER_NOT_REACHABLE' },
        { label: this.$t('chanPinQueHuo'), value: 'MERCHANT_OUT_OF_STOCK' }
      ],
      formData: {
        id: '',
        haOrderCode: '',
        cancellationReason: ''
      },
      rules: {
        cancellationReason: [{ required: true, message: this.$t('qingXuanZeQuXiaoYuanYin'), trigger: 'blur' }]
      }
    }
  },
  mounted() {},
  methods: {
    show(data) {
      this.formData.id = data.id
      this.formData.haOrderCode = data.haOrderCode
      this.dialogVisible = true
    },
    submitForm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          cancelOrderApi(this.formData).then((res) => {
            this.$emit('updata')
            this.$message.success(res&&res.message || this.$t('caoZuoChengGong'))
            this.resetForm()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['formRef'].resetFields()
      this.dialogVisible = false
    }

  }
}
</script>

<template>
  <el-dialog :title="$t('quXiaoDingDan')" :visible.sync="dialogVisible" width="600px">
    <el-form ref="formRef" :model="formData" label-width="120px" :rules="rules">
      <el-form-item :label="$t('halykDingDanHao')+'：'">{{ formData.haOrderCode }}</el-form-item>
      <el-form-item :label="$t('quXiaoYuanYin')+'：'" prop="cancellationReason">
        <el-select v-model="formData.cancellationReason" :placeholder="$t('qingXuanZeQuXiaoYuanYin')">
          <el-option v-for="(item,index) in reasonList" :key="index" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="resetForm">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t('confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<style scoped lang='scss'>

</style>
